<!--  -->
<template>
  <div :class="{ backanimation: isAnimation, player: true }"  v-if="songList.length !== 0">
    <div class="nav-bar">
      <div class="left" @click="backClick">
        <icon icon="#icon-arrow-down" />
      </div>
      <div class="center">{{ songList[currentIndex].name }}</div>
      <div class="right"></div>
    </div>

    <div class="logo" v-show="false"><img :src="songList[currentIndex].img" alt="" /></div>
    <lyric :lyric="lyric" @lyricBtnTime="lyricBtnTime" />

    <div class="time" ref="time">
      <span>{{ currentTime }}</span>

      <div
        class="progress-bar"
        ref="progressBar"
        @touchstart="barTouch"
        @touchmove="barTouch"
      >
        <div class="bar-inner" ref="barInner">
          <div class="progress" :style="{ width: progressWidth }"></div>
          <div class="progress-btn" :style="{ left: progressWidth }"></div>
        </div>
      </div>

      <span>{{ songList[currentIndex].duration | endTime(this) }}</span>
    </div>

    <div class="control">
      <div class="item">
        <span v-for="(item, index) in playMode" @click="modeClick(index)">
          <icon :icon="item" v-show="index == isMode" />
        </span>
      </div>
      <div class="item" @click="previousIndex">
        <icon icon="#icon-shangyishoushangyige" />
      </div>
      <div class="item play" @click="playClick">
        <icon icon="#icon-zanting1" v-show="this.$store.state.isPlay" />
        <icon icon="#icon-bofang" v-show="!this.$store.state.isPlay" />
      </div>
      <div class="item" @click="nextClick">
        <icon icon="#icon-xiayigexiayishou" />
      </div>
      <div class="item" @click="ListClick"><icon icon="#icon-caidan" /></div>
    </div>
    <play-list ref="playList" v-show="this.$store.state.isPlayList"></play-list>
    <audio ref="audioRef" autoplay :src="url" @timeupdate="upDateTime"></audio>
  </div>
</template>

<script>
import PlayList from "./playerChild/PlayList";
import Lyric from "./playerChild/Lyric.vue";
import Icon from "@/components/content/icon/Icon.vue";
import {
  getSongDetail,
  getSongUrl,
  getLyric,
  songInfo,
} from "@/network/player.js";
export default {
  name: "Player",
  data() {
    return {
      songList: [],
      currentIndex: 0,
      id: 0, //歌曲id
      url: "", //歌曲url
      lyric: "", //歌词
      songInfo: {}, //歌曲信息
      currentTime: "00:00", //当前时间
      endTime: "00:00", // 结束时间
      progress: 0, //前进量比
      progressBarWidth: 0, //进度条宽度
      progressBarOffset: 0, //进度条距离body的偏移量
      ended: false, //播放是否结束
      isPlayList: false, //显示列表
      playMode: ["#icon-xunhuanbofang", "#icon-suijibofang", "#icon-xunhuan"], //播放方式: 随机，列表,单曲
      isMode: 0, //默认为随机播放
      isflag: true, //节流阀
      isAnimation: false, //动画
    };
  },
  components: {
    Icon,
    PlayList,
    Lyric,
  },
  updated() {
    if (this.$refs.audioRef.ended) this.ended = true;
    this.$nextTick(() => {
      this.progressBarWidth = this.$refs.progressBar.clientWidth;
      this.progressBarOffset =
        this.$refs.progressBar.offsetLeft + this.$refs.time.offsetLeft;
    });
    this.isAnimation = false;
  },
  computed: {
    progressWidth() {
      return this.progress * this.progressBarWidth + "px";
    },
    monitor() {
      return this.$store.state.songList
    },
    monitorIndex() {
      return this.$store.state.currentIndex
    },
    isPlay() {
      return this.$store.state.isPlay
    }
  },
  watch: {
    monitor() {
      this.currentIndex = this.$store.state.currentIndex
      this.id = this.$store.state.songList[this.currentIndex].id
      this.songList = this.$store.state.songList
    },
    monitorIndex() {
      this.currentIndex = this.$store.state.currentIndex
      this.id = this.$store.state.songList[this.currentIndex].id
    },
    id() {
      this.getSongDetail(this.id);
      this.getSongUrl(this.id);
      this.getLyric(this.id);
    },
    isPlay() {
      if (this.$store.state.isPlay) {
        this.$refs.audioRef.play();
      } else {
        this.$refs.audioRef.pause();
      }
    },
    //播放结束
    ended() {
      this.ended = false;
      if (this.isflag) {
        this.isflag = false;
        this.$store.state.isMode == 2
          ? this.$refs.audioRef.load()
          : this.nextClick();
      } else {
        setTimeout(() => {
          this.isflag = true;
        }, 1000);
      }
    },
  },
  methods: {
    //当前播放位置
    upDateTime(e) {
      this.currentTime = this.getTime(e.target.currentTime * 1000);
      this.progress = (e.target.currentTime / this.songList[this.currentIndex].duration) * 1000;
      this.$store.commit("getCurrentTime", {
        currentTime: e.target.currentTime,
      });
    },

    /**
     * 监听事件
     */

    barTouch(e) {
      //点击的位置
      const touchWidth = e.targetTouches[0].pageX - this.progressBarOffset;
      this.$refs.audioRef.currentTime =
        (touchWidth / this.progressBarWidth) * this.$refs.audioRef.duration;
    },
    //播放
    playClick() {
      this.$store.commit("isPlay")
    },
    //歌词播放按钮
    lyricBtnTime(playTime) {
      this.$refs.audioRef.currentTime = playTime;
    },
    //下一首
    nextClick() {
      this.$store.commit("nextIndex");
    },
    //上一首
    previousIndex() {
      this.$store.commit("previousIndex");
    },
    //列表
    ListClick() {
      this.$store.commit("isPlayList", this.isPlayList);
      this.isPlayList = this.$store.state.isPlayList;
    },
    //播放方式
    modeClick(index) {
      this.$store.commit("isMode", {
        index,
      });
      this.isMode = this.$store.state.isMode;
    },
    //返回
    backClick() {
      this.$store.commit("backClick")
      this.isAnimation = true;
    },
    /**
     * 封装时间显示方法
     */
    getTime(date) {
      const d = new Date(date);
      const m = d.getMinutes();
      const s = d.getSeconds();
      return (
        ("00" + m).substr(m.toString().length) +
        ":" +
        ("00" + s).substr(s.toString().length)
      );
    },

    /**
     * 网络请求
     */
    getSongDetail(ids) {
      getSongDetail(ids).then((res) => {
        this.songInfo = new songInfo(res.songs[0]);
      });
    },
    getSongUrl(id) {
      getSongUrl(id).then((res) => {
        this.url = res.data[0].url;
      });
    },
    getLyric(id) {
      getLyric(id).then((res) => {
        this.lyric = res.lrc.lyric;
        this.$store.commit("getLyric", { lyric: this.lyric });
      });
    },
  },
  filters: {
    endTime(value, that) {
      if (!value) {
        return "00:00";
      }
      const _this = that._self;
      return _this.getTime(value);
    },
  },
};
</script>
<style lang='scss' scoped>
.player {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: black;
  z-index: 3000;
  .nav-bar {
    position: relative;
    display: flex;
    height: 44px;
    line-height: 44px;
    text-align: center;
    .left {
      width: 44px;
    }
    .center {
      flex: 1;
      overflow: hidden;
    }
    .right {
      width: 44px;
    }
  }
  .logo {
    position: fixed;
    width: 200px;
    height: 200px;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .time {
    position: fixed;
    bottom: 90px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 10px;
    z-index: 99;
    span {
      font-size: $font-size-small-s;
    }
    .progress-bar {
      position: relative;
      height: 10px;
      width: 100%;
      margin: 0 10px;
      .bar-inner {
        position: relative;
        height: 1px;
        background-color: $color-dialog-background;
        margin-top: 5px;
        .progress {
          height: 100%;
          background-color: #fff;
        }
        .progress-btn {
          position: absolute;
          top: -3px;
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background-color: #fff;
        }
      }
    }
  }
  .control {
    display: flex;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    margin: 0 20px;
    .item {
      flex: 1;
      text-align: center;
      font-size: $font-size-large-x;
    }
    .play {
      font-size: 50px;
    }
  }
}
.backanimation {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  animation-name: back;
  animation-direction: 1s;
}
@keyframes back {
  0% {
    top: 0%;
  }
  25% {
    top: 25%;
  }
  50% {
    top: 50%;
  }
  100% {
    top: 100%;
  }
}
</style>